Skip to content

Match class functions that appear after an opening square bracket #1428

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 1, 2025

Conversation

javoscript
Copy link
Contributor

The problem:
The lookbehind pattern (?<=^|[:=,;\s{()]) doesn't include [ in its character class, so these cases would be missed:

const classes = [clsx('btn', 'primary')]  // ❌ "clsx" not matched
const arr = [cn('text-red-500')]          // ❌ "cn" not matched  

But these would work:

const classes = [ clsx('btn', 'primary')] // ✅ matches (whitespace after [)
const arr = [, cn('text-red-500')]        // ✅ matches (comma before cn)

Why this matters:
Array contexts are common in modern JavaScript/React for combining classes:

const buttonClasses = [clsx(conditionalClasses), baseClasses]
const styles = [cn(variantStyle), defaultStyle]

The Fix:
The regex should include [ in the lookbehind character class:

/(?<=^|[:=,;\s{()\[])([\p{ID_Start}$_][\p{ID_Continue}$_.]*)[(`]/dgiu
//               ^ add \[ here

This would ensure we properly detect class utility functions at the beginning of arrays.

@javoscript
Copy link
Contributor Author

Examples:

Not working without the space before the bracket:
Screenshot 2025-07-31 at 20 23 10

Working with the space:
Screenshot 2025-07-31 at 20 23 41

@thecrypticace thecrypticace changed the title Fix class name matching in javascript right after opening square brackets Match class functions that appear after an opening square bracket Aug 1, 2025
@thecrypticace thecrypticace merged commit 5d8b5dc into tailwindlabs:main Aug 1, 2025
12 checks passed
@thecrypticace
Copy link
Contributor

I'd say I can't believe I missed that but… I can. 😅

Thanks! I'll tag a release with the fix tomorrow 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants